<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8">
	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	 <title>billboard.js - Themes</title>
	 <style>
		 span {
			 display: inline-block;
			 padding: 5px;
			 color: #fff;
			 font-size: 15px;
		 }
	 </style>
</head>
<body>
	<h1>Themes Colors</h1>
	<div id="colors"></div>
	<script>
		//
		const colors = {
			default: "#1f77b4;#ff7f0e;#2ca02c;#d62728;#9467bd;#8c564b;#e377c2;#7f7f7f;#bcbd22;#17becf;",
			insight: "#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;",
			graph: "#65CFC2;#D0A45F;#64A4F5;#EF65A2;#A377FE;#8AAEC7;#FF7E5A;#898EFE;#FFAC35;#70B0FF;",
			datalab: "#2ac4b3;#feaf29;#ff617b;#73a2ef;#b180d0;#3064cf;#d0a45f;#8aaec7;#ef65a2;#8aaec7;",
			dark: "#4a7fff;#b02c2c;#1ca46c;#b47300;#49baf3;#ed7e13;#cfaa00;#a6cd19;#dccb52;#f5d194;",
			modern: "#7ea9fa;#ffcd1e;#d33043;#41c464;#c86b74;#006bc2;#2a7e41;#f27c00;#c159ff;#bed017;"
		}

		let html = "";

		Object.keys(colors).forEach(v => {
			html += `<h2>${v}</h2>`;

			colors[v].split(";").forEach(v2 => {
				html += `<span style=background-color:${v2}>${v2}</span>`;
			});
		});

		document.getElementById("colors").innerHTML = html;
	</script>
</body>
</html>